<template>
  <div class="step-item-svg" :class="stepClass">
    <template v-if="option">
      <div class="step-bg">
        <svg viewBox="0,0,100,24" width="100%" xmlns="http://www.w3.org/2000/svg">
          <polygon :points="bgPoints" class="nav-bg" :class="navType" />
        </svg>
      </div>
      <div class="step-content">
        <!-- <span class="step-num">{{ option.num }}</span> -->
        <span class="step-title">{{ option.title }}</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "StepItemSvg",
  props: {
    option: {
      type: Object,
      default: () => ({
        num: null,
        title: null,
        subTitle: null,
      }),
    },
    actived: {
      type: Boolean,
      default: false,
    },
    passed: {
      type: Boolean,
      default: false,
    },
    arrived: {
      type: Boolean,
      default: false,
    },
    isEnd: {
      type: Boolean,
      default: false,
    },
    idx: {
      type: Number,
    },
    navType: {
      type: String,
      default: "primary",
    },
  },
  data() {
    return {
      points: {
        start: "0,0 90,0 100,12 90,24 0,24",
        middle: "0,0 90,0 100,12 90,24 0,24 10,12",
        end: "0,0 100,0 100,24 0,24 10,12",
      },
    };
  },
  computed: {
    stepClass: function () {
      if (this.actived) {
        return "actived";
      }
      if (this.passed) {
        return "passed";
      }
      if (this.arrived) {
        return "arrived";
      }
      return "unpass";
    },
    bgPoints: function () {
      // if (this.isEnd) {
      //   return this.points.end;
      // } else if (this.option && this.option.num === 1) {
      //   return this.points.start;
      // }
      return this.points.middle;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.step-item-svg {
  position: relative;
  .step-bg {
    // transform: scaleX(1.06);s
    .nav-bg {
      fill: #eeedec;
      cursor: pointer;
    }
    svg {
      display: block;
    }
  }
  .step-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    img {
      vertical-align: middle;
      height: 27px;
    }
    .step-num {
      display: inline-block;
      font-size: 16px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      text-align: center;
      line-height: 23px;
      color: #895b1e;
      border: 1px solid #895b1e;
      box-sizing: border-box;
      box-sizing: border-box;
    }
    .step-title {
      font-size: 18px;
      // font-weight: bold;
      // margin-left: 10px;
    }
  }
  &.arrived {
    .nav-bg {
      // fill: #f6ece3;
      fill: #bfbfbf;
    }
    .step-title {
      color: #fff;
    }
  }
  &.passed {
    .nav-bg {
      // fill: #f6ece3;
      fill: #bfbfbf;
    }
    .step-title {
      color: #fff;
    }
  }
  &.actived {
    .nav-bg {
      // fill: #b99968;
      fill: #2b65da;
    }
    .step-num {
      border: 1px solid #b99968;
      color: #895b1e;
      background: #fff;
    }
    .step-title {
      color: #fff;
    }
    .warning {
      fill: #faad14 !important;
    }
    .danger {
      fill: #ff4d4f !important;
    }
  }
  &.unpass {
    .step-content {
      cursor: initial;
      color: #333;
    }
    .step-num {
      color: #666666;
      border: 1px solid #dbdbdb;
      background: #fff;
    }
  }
}
</style>
